
import { Space } from 'antd';
import { NavLink, Outlet } from 'react-router-dom';

function App(){
    return (
        <div className="application">
            <Space>
                <NavLink to="/" className={ ({isActive}) => isActive ? 'nav-active' : '' }>首页</NavLink>
                <NavLink to="/home" style={ ({isActive}) => ({ color: isActive ? 'red' : 'blue' }) }>HOME</NavLink>
                <NavLink to="/about" style={ ({isActive}) => ({ color: isActive ? 'red' : 'blue' }) }>About</NavLink>
                <NavLink to="/user/login" className={ ({isActive}) => isActive ? 'nav-active' : '' }>Login</NavLink>
            </Space>

            {/* 为子路由对应的组件提供一个出口 */}            
            <Outlet />
        </div>
    )
}

export default App;